<template>
    <div>
        <input type="text" v-model="msg">
        <p class="p1">{{msg}}</p>
        <router-link to="/helloworld">hello</router-link>
        <router-link to="/index">index</router-link>
        <hr>
        <!-- key属性相当于给每一个元素增加了一个特殊的编号，在更新元素时可以提高效率 -->
        <button v-for="num in 5" :key="num" @click="showNum(num)">{{num}}</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg: '不困！'
        }
    },
    // 生命周期钩子函数-实例创建后页面显示前自动执行
    created() {
        // console.log(this.$route.meta.title);
        document.title = this.$route.meta.title
    },
    methods: {
        showNum(num) {
            console.log(num);
        }
    }
}
</script>

<style scoped>
    .p1 {
        color: red;
    }
</style>
